<template>
       <div class="form-box">
                <el-form ref="form" style="margin:20px 35%" :model="goods" label-width="80px">
                    <el-form-item label="商品名称">
                        <el-input v-model="goods.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <el-input-number v-model="goods.goodsPrice" :precision="2" :step="0.1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input-number v-model="goods.goodsNumber"></el-input-number>
                    </el-form-item>
                    <el-form-item label="商品图标">
                    <el-upload
                      action="http://localhost:8002/admin/goods/upload"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="uploadGoodsImage"
                       >
                       <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                     <el-form-item label="是否精品">
                        <el-radio-group v-model="goods.hotGoods">
                            <el-radio label="0">是</el-radio>
                            <el-radio label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-cascader :options="menus" :props="props" v-model="goods.category"></el-cascader>
                    </el-form-item>
                     <el-form-item label="商品图集">
                   <el-upload
                       action="http://localhost:8002/admin/goods/upload"
                       list-type="picture-card"
                       :on-success="uploadGoodsImages"
                       >
                    <template #default>
                    <i class="el-icon-plus"></i>
                    </template>
                    <template #file="{file}">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                >
                    <i class="el-icon-delete"></i>
                </span>
                </span>
           </div>
           </template>
            </el-upload>
                    </el-form-item>
                      <el-form-item label="商品介绍" style="overflow: hidden;">
                    <el-input type="textarea" v-model="goods.goodsIntroduce"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
           
     <el-dialog :visible.sync="dialogVisible">
            <img width="100%"  :src="dialogImageUrl" alt="" />
     </el-dialog>
     </div> 
</template>

<script>
import {CategoryTree,addGoods} from '@/api/index'
export default {
    name: 'baseform',
    data() {
        return {
            goods: {
                goodsName: '',
                goodsPrice: '',
                goodsNumber:'',
                hotGoods:"",
                category:"",
                goodsImage:"", //图标的地址
                goodsIntroduce: "",
                goodsImages:[],
                goodsSmallLogo:"",
                categoryOneId:"",
                categoryTwoId:"",
                categoryThreeId:""
            },
            menus: [],
            props:{expandTrigger:'click',label:"name",children: 'goodsTypeList',value:'catId'},
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
        };
    },
    created(){
       this.getCategoryTree();
    },
    methods: {
        //添加商品
        onSubmit() {
           let param=new FormData();
           this.goods.categoryOneId=this.goods.category[0]
           this.goods.categoryTwoId=this.goods.category[1]
           this.goods.categoryThreeId=this.goods.category[2]
           param.append("goodsName",this.goods.goodsName);
           param.append("goodsPrice",this.goods.goodsPrice);
           param.append("goodsNumber",this.goods.goodsNumber);
           param.append("goodsBigLogo",this.goods.goodsImage);
           param.append("hotGoods",this.goods.hotGoods);
           param.append("goodsIntroduce",this.goods.goodsIntroduce);
           param.append("goodsSmallLogo",this.goods.goodsImages);
           param.append("categoryOneId",this.goods.categoryOneId);
           param.append("categoryTwoId",this.goods.categoryTwoId);
           param.append("categoryThreeId",this.goods.categoryThreeId);
           addGoods(param).then(res=>{
               if(res.code==200){
                   this.$message.success("添加成功");
               }else{
                   this.$message.error("添加失败");
               }
           })
        },
        //上传多个文件图片
        uploadGoodsImages(file){
            this.goods.goodsImages.push(file.data.data)
            this.goods.goodsImages.forEach(element => {
                if(this.goods.goodsSmallLogo===""){
                    this.goods.goodsSmallLogo=element
                }else{
                    this.goods.goodsSmallLogo=this.goods.goodsSmallLogo+","+element
                }
            });
            console.log(this.goods.goodsSmallLogo)
        },
        //上传成功图标
        uploadGoodsImage(response, file, fileList){
            console.log(response)
          this.goods.goodsImage=response.data.data
          console.log(file,response,fileList);
        },
        //取消的图片
       handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
          console.log(file)
        this.dialogImageUrl = file.response.data.data;
        this.dialogVisible = true;
        
      },
        getCategoryTree(){
        CategoryTree().then(({data})=>{
          this.menus=data.all
          console.log(this.menus)
        })
      }
    }
};
</script>
<style scoped>
.form-box{
}
</style>